<template>
  <div>
    <!-- 新增搜索栏 -->
    <van-sticky :offset-top="0">
      <van-search
        v-model="searchKeyword"
        placeholder="请输入商品名称"
        show-action
        @search="onSearch"
        class="pink-search"
      >
        <template #action>
          <van-button 
            type="primary" 
            size="small" 
            @click="onSearch"
            class="pink-search-button"
          >搜索</van-button>
        </template>
      </van-search>
    </van-sticky>

    <van-row>
      <!-- 左侧分类 -->
      <van-col span="6">
        <van-sticky :offset-top="54"> <!-- 调整offset-top为搜索栏高度 -->
          <van-sidebar v-model="activeKey">
            <van-sidebar-item 
              v-for="(item,i) in categoryList" 
              :title="item.name" 
              @click="onClickLeftMenus(item.id)" 
              class="pink-sidebar-item"
            />
          </van-sidebar>
        </van-sticky>
      </van-col>
      
      <!-- 右侧商品列表 -->
      <van-col span="18">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list 
            v-model="loading" 
            :finished="finished" 
            finished-text="没有更多了" 
            @load="onLoad" 
            :immediate-check="false"
            :offset="0"
          >
            <van-card 
              v-for="(item,i) in productList" 
              :key="i" 
              :price="item.price" 
              :num="item.sold_count"
              :desc="item.spec" 
              :title="item.title" 
              :thumb="APIDomainName + item.pic"
              @click="onDetail(item.id)"
              class="pink-card"
            >
              <template #price>
                <span class="pink-price">¥{{ item.price }}</span>
              </template>
            </van-card>
          </van-list>
        </van-pull-refresh>
      </van-col>
    </van-row>
  </div>
</template>

<script>
import { getProductListAPI } from "@/api/product.js";
import { getCategoryListAPI } from "@/api/category.js"

export default {
  data() {
    return {
      searchKeyword: "", // 新增搜索关键词
      productList: [],
      categoryList: [],
      category_id: null,
      activeKey: 0,
      pageIndex: 0,
      pageSize: 8,
      pageTotal: 0,
      loading: false,
      finished: false,
      refreshing: false,
    }
  },
  created() {
    getCategoryListAPI().then(result => {
      this.categoryList = result.data;
      this.category_id = this.categoryList[0]?.id;
      this.onRefresh();
    });
  },
  methods: {
    // 新增搜索方法
    onSearch() {
      this.pageIndex = 0;
      this.finished = false;
      this.refreshing = true;
      this.loading = true;
      this.onLoad();
    },

    onRefresh() {
      this.pageIndex = 0;
      this.finished = false;
      this.refreshing = true;
      this.loading = true;
      this.onLoad();
    },

    onLoad() {
      this.pageIndex += 1;
      getProductListAPI({
        category_id: this.category_id,
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        keyword: this.searchKeyword // 新增搜索参数
      }).then((result) => {
        this.pageTotal = result.pageTotal;

        if (this.refreshing) {
          this.productList = [];
          this.refreshing = false;
        }

        if (result.data.length > 0) {
          this.productList = this.productList.concat(result.data);
        }

        this.loading = false;

        if (this.pageIndex >= this.pageTotal) {
          this.finished = true;
        }
      });
    },

    onClickLeftMenus(category_id) {
      this.category_id = category_id;
      this.searchKeyword = ""; // 切换分类时清空搜索词
      this.onRefresh();
    },

    onDetail(id) {
      this.$router.push({
        name: 'productDetail',
        query: { id },
      });
    }
  }
}
</script>

<style lang="less" scoped>
/* 粉色主题搜索栏 */
.pink-search {
  background: linear-gradient(to right, #ffdfe6, #ffc0cb);
  padding: 10px;
  
  :deep(.van-search__content) {
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 20px;
  }
}

.pink-search-button {
  background: linear-gradient(to right, #ff8a98, #ff6b8b);
  border: none;
  border-radius: 20px;
  color: white;
  height: 32px;
  margin-left: 10px;
}

/* 粉色侧边栏 */
.pink-sidebar-item {
  background-color: #fff5f7;
  
  &:hover {
    background-color: #ffdfe6;
  }
  
  &--select {
    background: linear-gradient(to right, #ffb6c1, #ffc0cb);
    color: #d23669;
    font-weight: bold;
  }
}

/* 粉色商品卡片 */
.pink-card {
  margin: 10px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(255, 182, 193, 0.2);
  
  &:active {
    transform: scale(0.98);
  }
}

.pink-price {
  color: #ff4757;
  font-weight: bold;
  font-size: 16px;
}

/* 调整侧边栏宽度 */
.van-sidebar {
  width: 100px;
  background-color: #fff5f7;
}

/* 响应式布局调整 */
@media (max-width: 768px) {
  .van-col--18 {
    padding-left: 5px;
  }
}
</style>